<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { ref } from "vue";
import { ProcessFormProps } from "./utils/types";
import { WA_RECHARGE_STATES } from "@/api/whatsapp";
import { message } from "@/utils/message";
import { DocumentCopy } from "@element-plus/icons-vue";

const props = withDefaults(defineProps<ProcessFormProps>(), {
  formInline: () => ({
    id: 0,
    wa_account: "",
    wa_account_remark: "",
    amount: 0,
    creator_name: "",
    created_at_text: "",
    remark: "",
    state: WA_RECHARGE_STATES.APPROVED,
    feedback_content: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

// 复制账号功能
const copyAccount = async () => {
  const account = newFormInline.value.wa_account;
  const copyText = account && account.charAt(0) === '1' ? account.substring(1) : account;
    
  try {
    await navigator.clipboard.writeText(copyText);
    message("账号已复制到剪贴板", { type: "success" });
  } catch (err) {
    console.error('复制失败:', err);
  }
};

defineExpose({ getRef });

const formRules = {
  state: [
    { required: true, message: "请选择处理结果", trigger: "change" }
  ],
  feedback_content: [
    {
      validator: (rule, value, callback) => {
        if (newFormInline.value.state === WA_RECHARGE_STATES.REJECTED && !value) {
          callback(new Error("驳回申请时必须填写反馈内容"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};

const stateOptions = [
  { label: "已充值", value: WA_RECHARGE_STATES.APPROVED, type: "success" },
  { label: "驳回", value: WA_RECHARGE_STATES.REJECTED, type: "danger" }
];
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <!-- 申请信息展示 -->
      <re-col :value="24" :xs="24" :sm="24" style="min-width: 220px !important;">
        <el-descriptions title="申请信息" :column="2" border>
          <el-descriptions-item label="申请编号">{{ newFormInline.id }}</el-descriptions-item>
          <el-descriptions-item label="WhatsApp账号">
            <div style="display: flex; align-items: center; gap: 8px;">
              <span>{{ newFormInline.wa_account }}</span>
              <el-button 
                @click="copyAccount" 
                :icon="DocumentCopy"
                size="small"
                type="primary"
                link
                title="点击复制账号"
              />
              <span v-if="newFormInline.wa_account_remark" style="color: #909399;">
                （{{ newFormInline.wa_account_remark }}）
              </span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="充值金额">
            <span style="color: #f56c6c; font-weight: bold;">{{ newFormInline.amount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="申请人">{{ newFormInline.creator_name }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ newFormInline.created_at_text }}</el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
          <el-descriptions-item label="申请备注">{{ newFormInline.remark || "-" }}</el-descriptions-item>
        </el-descriptions>
      </re-col>

      <!-- 处理表单 -->
      <re-col :value="24" :xs="24" :sm="24" style="margin-top: 20px;">
        <el-form-item label="处理结果" prop="state">
          <el-radio-group v-model="newFormInline.state">
            <el-radio
              v-for="option in stateOptions"
              :key="option.value"
              :label="option.value"
              border
              style="margin-right: 20px;"
            >

              {{ option.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="反馈内容" prop="feedback_content">
          <el-input
            v-model="newFormInline.feedback_content"
            :rows="4"
            type="textarea"
            :placeholder="newFormInline.state === WA_RECHARGE_STATES.REJECTED ? '请输入驳回原因（必填）' : '请输入反馈内容（选填）'"
            style="width: 100%"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style scoped>
:deep(.el-descriptions__title) {
  font-weight: bold;
  color: var(--el-text-color-primary);
}
</style>
